<template>
	<view class="" style="width:100%;height: 100%;">
		<qiun-data-charts v-if="tabIndex==0" type="column" :opts="opts" :chartData="chartData" />
		<qiun-data-charts v-if="tabIndex==1" type="column" :opts="opts" :chartData="chartData2" />
	</view>
</template>

<script>
	export default {
		props: ['tabIndex'],
		computed: {

		},
		data() {
			return {
				chartData: {},
				chartData2: {},
				opts: {
					color: ["#16AFAD", "#189AD7", "#00AEFF"],
					padding: [15, 15, 0, 5],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					dataLabel:false,
					yAxis: {
						data: [{
							min: 0
						}]
						
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							// seriesGap: 5,
							// linearOpacity: 0.9,
							// barBorderCircle: true,
							customColor: [
								"#16AFAD",
								"#189AD7"
							]
						}
					}
				}
			}
		},
		mounted() {
			console.log(this.tabIndex);
			this.$api.goodsFlowRank().then(res => {
				console.log(res, '货物流入流出排名');
				let resData = res.data.data
				//省内
				let chartData = {
					categories: ['总流量', ...resData.cityFlows.map(el => el.areaName)],
					series: [{
							name: "流入",
							data: [resData.inflow, ...resData.cityFlows.map(el => el.provinceInFlowIn)]
						},
						{
							name: "流出",
							data: [resData.outflow, ...resData.cityFlows.map(el => el.provinceInFlowOut)]
						}
					]
				}
				this.chartData = chartData
				//省外
				let chartData2 = {
					categories: ['总流量', ...resData.cityFlows.map(el => el.areaName)],
					series: [{
							name: "流入",
							data: [resData.outInflow, ...resData.cityFlows.map(el => el.provinceOutFlowIn)]
						},
						{
							name: "流出",
							data: [resData.outOutflow, ...resData.cityFlows.map(el => el
								.provinceOutFlowOut)]
						}
					]
				}
				this.chartData2 = chartData2
			})
		},
		methods: {

		},
	}
</script>

<style>

</style>
